//1.公用样式
require('../../assets/css/index.js')
//当前页面样式
require('./personal.less')


//2.公用js
let dom = require('../../utils/dom.js');
let https = require('../../utils/https.js');
let local = require('../../utils/local.js');
let utils = require('../../utils/utils.js');
// let personalBtn=dom.getByClass('.personal-btn')
//     console.log(personalBtn);


//3.当前页面效果
// console.log(dom);
//相当于文档加载事件
dom.ready(function () {
    // 返回上一级
    let personalBtn = document.querySelector('.personal-btn')
    // 更换头像
    let photobtn = document.querySelector('.photo-btn');
    let photoimg1 = document.querySelector('.photo-img1')//小头像
    let photoimg2 = document.querySelector('.photo-img2')//大头像
    //更换头像页面高度
    let showPersonal = document.querySelector('.show-personal')
    let quitBtn = document.querySelector('.show-personal .quit')//退出头像
    let photoData = document.querySelector('#photo-data')//头像数据

    let userName = dom.getById('.user-name-btn')//用户名

    let genderOption = dom.getById('.gender-option')//性别
    let genderBtn = dom.getById('.gender-box>.btn')//性别btn

    let birthdayOption = dom.getById('.birthday-option')//生日
    let birthdayBtn = dom.getById('.birthday-btn')//生日btn

    let addressOption = dom.getById('.address-option')//省份
    let addressBtn = dom.getById('.address-btn')//省份btn

    let cityOption = dom.getById('.city-option')//城市
    let cityBtn = dom.getById('.city-btn')//城市btn

    let inptext = dom.getById('.inptext')//简介
    let inpnum = dom.getById('#inpnum')//简介输入个数
    let submitBtn = dom.getById('.submit')//提交数据

    // 封装渲染页面 类别
    function applydata() {
        
        https.get('/api/user/info', function (res) {
            if (res.errno == 0) {
                local.set('userdata', res)
                local.get('userdata')
                console.log(local.get('userdata'));
                
                let { nickName, gender, birthday, provinceId, cityId, sign, imgUrl } = local.get('userdata').data
                // 用户名获取值 进行渲染
                userName.value = nickName
                // 获取性别 进行渲染
               
                genderOption.value =  gender=gender==0?gender='男':gender='女';
                
                // 生日的渲染
                birthdayOption.innerText = birthday
                //省份
                addressOption.value = provinceId
                //城市
                cityOption.value = cityId
                // 简介
                inptext.value = sign
                // 头像渲染
                imgUrl=imgUrl==""?require('../../assets/imgs/cat.jpg'):https.BASE_URL+imgUrl;
                
                photoimg2.style.backgroundImage = "url(" + imgUrl+ ")";
                photoimg1.style.backgroundImage = "url(" +imgUrl + ")";


            }

            


        })
    }

    applydata()


    // 小头像的点击
    photoimg1.addEventListener('click', function () {
        photoData.click();
    })
    // 返回上一级
    personalBtn.addEventListener('click', function () {
        // window.location.href = 'mine.html';或者
        window.history.go(-1);//退回上一层


    })

    // 点击显示头像蒙层
    photobtn.addEventListener('click', function () {
        showPersonal.classList.add('showHerght');
    })
    //  退出换头蒙层
    quitBtn.addEventListener('click', function () {
        showPersonal.classList.remove('showHerght');
    })

    // 全局头像地址
    let photoUrl=''
    //  更换头像 包括数据同步后台 注未完图片未能渲染
    photoData.addEventListener('change', function () {
        // 调用方法 渲染头像
        https.imgapply('file', this.files[0], '/api/shared/uploadPortrait1', function (res) {
            if (res.errno == 0) {
                photoimg2.style.backgroundImage = "url(" + https.BASE_URL + res.data.url + ")";
                photoimg1.style.backgroundImage = "url(" + https.BASE_URL + res.data.url + ")";
                photoUrl=res.data.url;
            } else {
                alert('更换失败')
            }
        })

        // this 是具体那个dom被触发了
        // this。files 是这个type的属性 
        // 获取到的是选择的图片 或文件名的一个数组对象
        // let file=this.files[0]
        // // 构造FormData（对象）函数创建一个新FormData
        // let fd=new FormData();
        // fd.append('file',file)
        // let xhr=new XMLHttpRequest();
        // xhr.open('post',https.BASE_URL+"/api/shared/uploadPortrait1")

        // xhr.onreadystatechange=function(){
        //     if (xhr.readyState==4 && xhr.status==200) {
        //         let res=JSON.parse(xhr.response)
        //        photoimg2.style.backgroundImage="url("+https.BASE_URL+res.data.url+")";
        //        photoimg1.style.backgroundImage="url("+https.BASE_URL+res.data.url+")";
        //     }
        // }
        // xhr.send(fd);






        // console.log(fd.get('file'));
        // console.log(fd.get('file').name);
        // photoimg.backgroundImageUrl='IMG_7043.JPG';

        // photoimg.style.backgroundImage=this.files[0].name;
        // photoimg.style.backgroundImage='IMG_7043.JPG';

        // console.log(photoData.value);
        // photoimg.style.backgroundImage = `${photoData.value}`;
        // utils.ajax({
        //     type: 'post',
        //     url: 'http://139.9.177.51:3701/api/shared/uploadPortrait',
        //     data: {
        //         file: photoData.value
        //     },
        //     success: function (res) {
        //         console.log(res.errno);
        //         console.log(res);

        //         if (res.errno == 0) {
        //             alert('更换成功成功')
        //         } else if (res.errno == 10003) {
        //             alert(`${res.message}`)
        //         }
        //     }
        // })
    })

    // 性别全局定义性别
    let gendernum=0
    // 性别选择框 底部弹框
    genderBtn.addEventListener('click', function () {
        weui.picker([{
            label: '男',
            value: 0
        }, {
            label: '女',
            value: 1
        }, {
            label: '保密',
            value: 2
        }], {
                onConfirm: function (result) {
                    genderOption.value = result[0].label;
                    gendernum= result[0].value;
                },
                title: '请选择性别'

            });
    })

    // 生日选择框
    birthdayBtn.addEventListener('click', function () {
        weui.datePicker({
            start: 1990,
            end: new Date().getFullYear(),

            onConfirm: function (result) {
                // 数组的便利元素 调整
                let date = result.map(function (v, i) {
                    // 调用自己封装的函数 三木运算 
                    return utils.num(result[i].value)
                }).join('-');
                console.log();
                birthdayOption.innerText = date

            },
            title: '请选择生日'
        });
    })

    // 全局定义省份id
    let addressnum = 0
    // 省份选择框 底部弹框
    addressBtn.addEventListener('click', function () {

        https.get('/api/shared/province', function (res) {
            if (res.errno == 0) {
                // console.log(res.data);//获取数据是一个数组对象，
                let addressData = res.data.map(function (v, i) {//便利数组重新组装数组格式 weui需要对应格式才能渲染
                    return {
                        label: v.name,
                        value: v.id
                    }

                })
                // console.log(addressData);把数据渲染到页面
                weui.picker(addressData, {
                    onConfirm: function (result) {
                        addressOption.innerText = result[0].label;
                        addressnum=result[0].value;
                        local.set('address', result[0].value)
                    },
                    title: '请选择省份'
                });
            }
        })
    })

     // 全局定义城市id
     let citynum = 0
    // 城市选择框 底部弹框
    cityBtn.addEventListener('click', function () {
        // 获取本地数据 判断是否先选择了省份
        if (local.get('address')) {
            // 传入省份id 获取对应城市数据
            https.get('/api/shared/city?provinceId=' + local.get('address'), function (res) {
                if (res.errno == 0) {
                    // 城市数据类型拼接
                    let cityData = res.data.map(function (v, i) {//便利数组重新组装数组格式 weui需要对应格式才能渲染
                        return {
                            label: v.name,
                            value: v.id
                        }
                    })
                    // 城市的渲染
                    weui.picker(cityData, {
                        onConfirm: function (result) {
                            cityOption.innerText = result[0].label;
                            citynum=result[0].value;
                        },
                        title: '请选择城市'

                    });
                }

            })
        } else {
            weui.topTips('请先选择省份')
        }
    })


    // 获取文本内容个数
    inptext.addEventListener('input',function(){
        // console.log(inptext.value.length);
        inpnum.innerText=inptext.value.length
    })

    
    // 提交信息
    submitBtn.addEventListener('click',function() {
        photoUrl=photoUrl==""?require('../../assets/imgs/cat.jpg'):photoUrl
        https.post('/api/user/changeInfo',{
            nickName:userName.value,
            gender:gendernum,
            provinceId:addressnum,
            cityId:citynum,
            birthday:birthdayOption,//.innerText?birthdayOption.innerText:'请选择生日',
            imgUrl:photoUrl,
            sign:inptext.value,
        },function(res){
            if (res.errno==0) {
                applydata()
                window.location.href='mine.html'
            }else{
                window.location.href='mine.html'
            }                
        })
    })


    // 疑问点
//    function showdata(url,data,dom,str){
//         https.get(url+'?'+data,function (res) {
//             if (res.errno == 0) {
//                 // 城市数据类型拼接
//                 let cityData = res.data.map(function (v, i) {//便利数组重新组装数组格式 weui需要对应格式才能渲染
//                     return {
//                         label: v.name,
//                         value: v.id
//                     }
//                 })
//                 // 城市的渲染
//                 weui.picker(cityData, {
//                     onConfirm: function (result) {
//                         dom.innerText = result[0].label;
//                     },
//                     title: str

//                 });
//             }

//         })
//         console.log('----------------------------------');
        
//         https.get(url+data, function (res) {
//             if (res.errno == 0) {
//                 // console.log(res.data);//获取数据是一个数组对象，
//                 let addressData = res.data.map(function (v, i) {//便利数组重新组装数组格式 weui需要对应格式才能渲染
//                     return {
//                         label: v.name,
//                         value: v.id
//                     }

//                 })
//                 // console.log(addressData);把数据渲染到页面
//                 weui.picker(addressData, {
//                     onConfirm: function (result) {
//                         dom.innerText = result[0].label;

//                         local.set('address', result[0].value)
//                     },
//                     title: str
//                 });
//             }
//         })
//    }
})


